<template>
    <div>
        <el-form v-model="itemData" class="form-box" label-position="left">
            <div class="form-title">基本信息</div>
            <el-row :gutter="20">
                <el-col :span="8" v-for="item in showList" :key="item.value" >
                    <el-form-item v-if="item.value == 'type'" :label="item.name">
                        <template v-if="isEdit">
                            <el-select v-model="itemData[item.value]" placeholder="请选择">
                                <el-option label="正式员工" value="正式员工"></el-option>
                                <el-option label="实习" value="实习"></el-option>
                                <el-option label="外协" value="外协"></el-option>
                            </el-select>
                        </template>
                        <template v-else>
                            <span v-if="itemData[item.value]">
                            {{itemData[item.value]}}
                            </span>
                            <span v-else>正式员工</span>
                        </template>
                    </el-form-item>
                    <el-form-item v-else :label="item.name">
                        {{itemData[item.value]}}
                    </el-form-item>
                </el-col>
            </el-row>
            <div class="form-title">其他信息</div>
            <el-row :gutter="20">
                <el-col :span="8" v-for="(item1,index1) in editList" :key="item1.value+index1" >
                    <template v-if="isEdit">
                        <el-form-item v-if="item1.value != 'position' && item1.value != 'technical_field'" class="form-item" :label="item1.name">
                            <el-select v-model="itemData[item1.value]" :multiple="item1.value != 'status'" clearable collapse-tags placeholder="请选择" :disabled="item1.value == 'technology_module'">
                                <el-option
                                v-for="(v,i) in filterData[item1.value]"
                                :key="item1.value+i"
                                :label="v.text"
                                :value="v.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item v-if="item1.value == 'technical_field'" class="form-item" :label="item1.name">
                            <el-cascader
                                v-model="itemData[item1.value+'_list']"
                                :options="singleFilterData"
                                :props="{ multiple: true }"
                                collapse-tags
                                clearable></el-cascader>
                        </el-form-item>
                     </template>
                    <el-form-item v-else class="form-item">
                        <span class="col-span">{{ item1.name }}</span>
                        <template v-if="item1.value != 'status'">
                            <span style="margin-right: 10px" v-for="(v,i) in itemData[item1.value+'_name']" :key="i"> 
                                <el-tag type="primary">{{v}}</el-tag>
                            </span>
                        </template>
                        <span v-else><el-tag :type="itemData.status == 1 ? 'success' : 'danger'">{{itemData.status_show}}</el-tag></span>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="form-btn" v-if="isEdit">
            <el-button type="primary" @click="submit">保存</el-button>
        </div>
        
    </div>
    
</template>

<script>
import { getHeaderName } from '@/app.config'
export default {
    name: 'Talent',
    props: {
        itemFormData: Object,
        filterData: Object,
        singleFilterData: Array,
        isEdit: Boolean
    },
    data() {
        return {
            itemData: {},
            showList: [{
                name: '员工姓名：',
                value: 'name'
            },{
                name: '职级：',
                value: 'rank'
            },{
                name: '部门：',
                value: 'dept'
            },{
                name: '员工类型：',
                value: 'type'
            },{
                name: '司龄：',
                value: 'working_years'
            },{
                name: '入职时间：',
                value: 'joinworkdate'
            }],
            editList: [{
                name: '工作岗位：',
                value: 'position'
            },{
                name: '工作模式：',
                value: 'working_mode'
            },{
                name: '技术模块：',
                value: 'technology_module'
            },{
                name: '软件平台：',
                value: 'software_platform'
            },{
                name: '业务领域：',
                value: 'business_area'
            },{
                name: '编程语言：',
                value: 'programing_language'
            },{
                name: '人员状态：',
                value: 'status'
            },{
                name: '技术领域：',
                value: 'technical_field'
            }]
        }
    },
    mounted() {
        this.itemData = this.itemFormData
        this.editList.map((v,i) => {
            if(v.value != 'status'&&v.value != 'technical_field') {
                this.itemData[v.value+'_name'] = this.obj2list(this.itemData[v.value],'name')
                this.itemData[v.value] = this.obj2list(this.itemData[v.value],'id')
            }
            if(v.value == 'technical_field') {
                this.itemData[v.value+'_name'] = this.obj2list(this.itemData[v.value],'name')
                if(this.itemData[v.value].length) {
                    this.itemData[v.value+'_list'] = this.itemData[v.value].map((val,ind) => {
                        return val.all_parent_list_id
                    })
                }
            }
        })
    },
    methods: {
        obj2list(array,type) {
            let arr = []
            array.map((v,i) => {
                arr.push(v[type]) 
            })
            return arr
        },
        submit() {
            if(this.itemData['technical_field_list'] && this.itemData['technical_field_list'].length > 10) {
                this.$message.error('技术领域最多选择10个')
                return false
            } else {
                this.$emit('submit',this.itemData)
            }
            
        }

    },
    watch: {

    }
}
</script>
<style lang="scss" scoped>
.form-box {
    padding: 0 20px 20px 20px;
}
.form-title {
    font-size: 18px;
    margin: 10px 0 30px 0;
}
.form-item {
    display: flex;
    min-height: 50px;
}
.form-btn {
    text-align: right;
}
</style>


